<h1 id="savediv">Reordering Birds - Click and Drag to Reorder</h1>
<ol class="zebra" id="birds"> <% @birds.each do |bird| %>
  <li class="zebra" id="bird_<%= bird.id %>"><span class="handle"><img src="/assets/cursor.svg" width= "15px" height="15px"/></span><%= bird.common_name %></li>
<% end %></ol>



<script>
// Sorting the list

$(document).ready(function(){
$('#birds').sortable({
axis: 'y',
dropOnEmpty: false,
handle: '.handle',
cursor: 'crosshair',
items: 'li',
opacity: 0.4,
scroll: true,
update: function(){
$.ajax({
type: 'post',
data: $('#birds').sortable('serialize'),
dataType: 'script',
complete: function(request){
$('#savediv').animate({'opacity': 0}, 350, function () {
    $(this).text('Changes Saved - Click and Drag to Reorder');
}).animate({'opacity': 1}, 350);
$("#birds").fadeIn();
$('#birds').effect('highlight');
},
url: '/birds/sort'})
}
});
});


$(document).ajaxSend(function() {
  $( "#birds" ).fadeOut();
  $('#savediv').animate({'opacity': 0}, 350, function () {
    $(this).text('Saving Changes...');
}).animate({'opacity': 1}, 350);
  

});
</script>